<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      button.active {
         color: white;
         background-color: orange;
      }
   </style>
</head>

<body>
   <canvas id="c1" width="800" height="600" style="border: 1px solid #ccc;"></canvas><br>
   <button id="boldBtn" type="button">粗线条</button>
   <button id="thinBtn" type="button" class="active">细线条</button>
   <button id="saveBtn" type="button">保存签名</button>
   <input type="color" name="" value="" id="color">
   <button id="clearBtn">橡皮擦</button>
   <button id="nullBtn">清空画布</button>
   <script>
      // 获取画布和绘制的上下文对象
      const canvas = document.querySelector('#c1')
      const ctx = canvas.getContext('2d')
      // 连接处圆润
      ctx.lineJoin = 'round'
      // 端点处圆润
      ctx.lineCap = 'round'
      // 获取输入框和按钮
      const boldBtn = document.querySelector('#boldBtn')
      const thinBtn = document.querySelector('#thinBtn')
      const saveBtn = document.querySelector('#saveBtn')
      const inputColor = document.querySelector('#color')
      const clearBtn = document.querySelector('#clearBtn')
      const nullBtn = document.querySelector('#nullBtn')
      // 设置允许绘制的变量
      let isDraw = false
      canvas.onmousedown = function () {
         isDraw = true
         ctx.beginPath()
         let x = event.pageX - canvas.offsetLeft
         let y = event.pageY - canvas.offsetTop
         ctx.moveTo(x, y)
      }
      canvas.onmouseleave = function () {
         isDraw = false
         ctx.closePath()
      }
      canvas.onmouseup = function () {
         isDraw = false
         ctx.closePath()
      }
      canvas.onmousemove = function () {
         if (isDraw) {
            let x = event.pageX - canvas.offsetLeft
            let y = event.pageY - canvas.offsetTop
            ctx.lineTo(x, y)
            ctx.stroke()
         }
      }
      boldBtn.onclick = function () {
         ctx.globalCompositeOperation = 'source-over'
         ctx.lineWidth = 10
         boldBtn.classList.add('active')
         clearBtn.classList.remove('active')
         thinBtn.classList.remove('active')
      }
      thinBtn.onclick = function () {
         ctx.globalCompositeOperation = 'source-over'
         ctx.lineWidth = 2
         thinBtn.classList.add('active')
         clearBtn.classList.remove('active')
         boldBtn.classList.remove('active')
      }
      clearBtn.onclick = function () {
         ctx.globalCompositeOperation = 'destination-out'
         ctx.lineWidth = 30
         clearBtn.classList.add('active')
         boldBtn.classList.remove('active')
         thinBtn.classList.remove('active')
      }
      nullBtn.onclick = function () {
         ctx.clearRect(0, 0, 800, 600)
      }
      saveBtn.onclick = function () {
         const urlData = canvas.toDataURL()
         // const img = new Image()
         // img.src = urlData
         // document.body.appendChild(img)
         const downloadA = document.createElement('a')
         downloadA.setAttribute('download', '酷炫签名')
         downloadA.href = urlData
         downloadA.click()
      }
      inputColor.onchange = function () {
         ctx.strokeStyle = inputColor.value
      }
   </script>
</body>

</html>